//获取canvas上下文
const ctx = document.getElementById('canvas').getContext('2d');
/* 
  canvas绘图会基于一个默认的坐标系，坐标系的原点在canvas画布的左上角，x轴正方向是水平向右，y轴正方向是垂直向下。
  这个坐标系是可以更改的
*/
/* 
  translate 平移,在canvas中用于移动坐标系的原点
  rotate 旋转,在canvas中用于旋转坐标系,默认旋转方向是顺时针
*/
ctx.translate(100, 100); //将坐标系原点移动到(100, 100)的位置
ctx.rotate(-Math.PI / 2); //将坐标系旋转90度,默认旋转方向是顺时针
ctx.beginPath();
// ctx.scale(0.5, 0.5); //将坐标系缩放2倍,参数:x轴缩放比例，y轴缩放比例
ctx.fillStyle = 'red';
//基于新的坐标系绘制矩形
ctx.fillRect(0, 0, 100, 200);
ctx.stroke();
